<!--
 * @Author: 郑宏杰
 * @Date: 2020-07-07 11:37:03
 * @LastEditTime: 2020-07-09 11:30:03
 * @LastEditors: Please set LastEditors
 * @Description: 登录页面
 * @FilePath: \靖凯开源系统\jingkaisystem\src\pages\home\home.vue
--> 
<template>
  <!--登录页面-->
  <div class="register">
    <!-- 头部logo-->
    <div class="header">
      <!-- 头部logo图片-->
      <img class="logo" src="@/assets/img/logo.png" alt="logo图标" />
    </div>
    <!-- 主要内容-->
    <div class="container">
      <el-row>
        <!-- 左边标题-->
        <el-col :span="12" class="title">
          <h1 class="title_name">
            靖凯开源考试系统
            <!-- 标题的地址-->
            <p>www.ossjk.com</p>
          </h1>
        </el-col>
        <!-- 登录表单-->
        <el-col :span="12" class="login">
          <div class="loginFrom">
            <login-from></login-from>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import loginFrom from "./components/loginFrom"; //引入登录表单组件
export default {
  components: {
    loginFrom //登录表单组件
  },
  created() {
    
    
  }
};
</script>

<style lang="scss" scoped>
.register {
  /* 头部样式 */
  .header {
    padding: 0 50px;
    /* 头部logo样式 */
    .logo {
      height: 64px;
    }
  }
  /* 主要内容样式 */
  .container {
    padding: 11% 0;
    background: #0ff;
    height: 100%;
    background: url("../../assets/img/loginbg.jpg") no-repeat;
    background-size: 100% 100%;
    /* 左边标题盒子样式 */
    .title {
      // border: 1px solid black;
      text-align: right;
      padding-right: 100px;
      /* 左边标题样式 */
      .title_name {
        color: #007dc9;
        display: inline-block;
        font-weight: 800;
        letter-spacing: 2px;
        height: 270px;
        font-size: 64px;
        width: 320px;
        text-align: left;
        /* 左边标题网址样式 */
        p {
          width: 100%;
          font-size: 24px;
          text-align: left;
          padding-left: 15%;
        }
      }
    }
    /* 右边登录盒子样式 */
    .login {
      // border: 1px solid black;
      height: 100%;
      width: 100%;
      max-width: 300px;
      display: flex;
      align-items: center;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 10px;
      padding: 0 20px;
    }
  }
}
</style>